<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
const list = ref([
  {
    id: 1,
    name: '店长推荐',
  },
  {
    id: 2,
    name: '家常菜',
  },
  {
    id: 3,
    name: '本店招牌',
    isExpand: true,
    children: [
      {
        id: 4,
        name: '本店招牌二级',
      },
      {
        id: 5,
        name: '招牌二级',
      },
    ],
  },
  {
    id: 6,
    name: '特色烧烤',
    isExpand: true,
    children: [
      {
        id: 7,
        name: '蔬菜类',
      },
    ],
  },
  {
    id: 8,
    name: '其他',
    isExpand: false,
    children: [
      {
        id: 9,
        name: '其他二级',
      },
    ],
  },
])

function toAdd() {
  uni.navigateTo({ url: '/pages/dishCategory/dishCategoryAdd' })
}
function toSort() {
  uni.navigateTo({ url: '/pages/dishCategory/dishCategorySort' })
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="分类管理" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      class="box-border flex-1 overflow-hidden p-[10px]"
      scroll-y
      :show-scrollbar="false"
    >
      <template v-for="item in list" :key="item.id">
        <view class="mb-[10px] rounded-lg bg-white px-[15px] py-[13px]">
          <view class="flex items-center justify-between">
            <view class="flex">
              <view
                v-if="item.children"
                class="i-carbon-caret-right block h-[20px] w-[20px] text-main transition-all"
                :class="item.isExpand ? 'rotate-90' : 'rotate-0'"
                @click="item.isExpand = !item.isExpand"
              />
              <wd-text :text="item.name" color="#333" size="14px" class="ml-1" />
            </view>
            <view>
              <wd-button v-if="item.children" type="text" size="small">排序</wd-button>
            </view>
          </view>
          <view v-if="item.children && item.isExpand" class="grid mt-4 gap-5 pl-8">
            <template v-for="ic in item.children" :key="ic.id">
              <wd-text :text="ic.name" color="#333" size="14px" />
            </template>
          </view>
        </view>
      </template>
    </scroll-view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="text" @click="toSort">
        <view class="flex flex-col items-center justify-center">
          <view class="i-icon-park-outline-sort-two text-main" />
          <text class="mt-1 text-[10px] text-main leading-none">分类排序</text>
        </view>
      </wd-button>
      <wd-button type="primary" :round="false" class="ml-4 flex-1" @click="toAdd">
        新建分类
      </wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
